<template>
    <el-dialog v-model="props.dialogVisible" :title="props.modalVal.title" width="30%" :before-close="handleClose">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" />
            </el-form-item>
            <el-form-item label="密码" prop="psw" v-if="props.modalVal.title=='添加用户 '">
                <el-input v-model="ruleForm.psw" type="password" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" />
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="ruleForm.mobile" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleCloseFun">{{ $t('dialog.Cancel') }}</el-button>
                <el-button type="primary" @click="addUserFun(ruleFormRef)">
                    {{ $t('dialog.Confirm') }}
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { defineEmits, defineProps,watch } from 'vue';
import { reactive,ref } from 'vue'
import { updataStatus } from "@/api/users"
import { ElMessage } from 'element-plus'

// defineProps({
//     initGetUsersList:{
//         type:function name(params) {

//         },
//         required:true
//     }
// })
const ruleFormRef=ref()
let   ruleForm = ref({
    username: '',
    psw: '',
    emial: '',
    mobile: '',
})
const emits = defineEmits('update:modelValue','initUsersList')
const props = defineProps(['initGetUsersList','dialogVisible','changeVis','modalVal'])

watch(()=>props?.modalVal,()=>{
console.log(props?.modalVal,'modalVal')
ruleForm.value=props?.modalVal.val
},{deep:true,immediate:true})
const handleCloseFun = () => {
    props.changeVis(false)
}
const handleClose = (done) => {
    done()
    handleCloseFun()
}
const validateEmail = (rule, value, callback) => {
    if (/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(value)) {
        callback()
    } else {
        callback(new Error("请输入正确的邮箱地址"))
    }
}
const rules = reactive({
    username: [
        { required: true, message: '请输入姓名' },
        { min: 3, max: 10, message: '长度3-10' },
    ],
    psw: [
        {
            required: true,
        },
    ],
    email: [
        {
            required: true,
        },
        { validator: validateEmail }
    ],
    mobile: [
        {
            required: true,
        },
    ],
})
const addUserFun =  (formEl) => {
    formEl.validate(async (valid) => {
    console.log(ruleForm.value, valid,'val')

        if (valid) {
            let res = await updataStatus()
            if (res) {
                ElMessage({
                    message: '添加成功',
                    // message: t('message.updeteSuccess'),
                    type: 'success',
                })
                // props.initGetUsersList()
                emits('initUsersList')
                handleCloseFun()
                // emits('update:modelValue', false)

            }
        } else {
            console.log('error submit!')
            return false
        }
    })


}
</script>